<template>
  <div class="p-2">
    <div class="viewBox">
      <div class="title-item">
        <span class="line-box"></span><span>查看</span>
      </div>
      <!-- 添加或修改教学资源管理公有库对话框 -->
      <el-form ref="courseCertificateFormRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="课程" prop="courseId">
          <el-input v-model="form.courseId" placeholder="请输入课程" />
        </el-form-item>
        <el-form-item label="学段" prop="coursePeriod">
          <el-select v-model="form.coursePeriod" placeholder="请输入学段" clearable>
              <el-option
                v-for="dict in sys_period"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="年级(班级)" prop="courseGrade">
          <el-input v-model="form.courseGrade" placeholder="请输入年级(班级)" />
        </el-form-item>
        <el-form-item label="学科" prop="courseSubject">
          <el-input v-model="form.courseSubject" placeholder="请输入学科" />
        </el-form-item>
        <el-form-item label="授课教室" prop="courseRoot">
          <el-input v-model="form.courseRoot" placeholder="请输入授课教室" />
        </el-form-item>
        <el-form-item label="授课教师" prop="courseTeacher">
          <el-input v-model="form.courseTeacher" placeholder="请输入授课教师" />
        </el-form-item>
       
        <el-form-item label="授课学校" prop="courseDept">
          <el-tree-select
          filterable
            clearable
            v-model="form.courseDept"
            :data="deptOptions"
            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
            value-key="deptId"
            placeholder="请选择学校"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="授课时间" prop="courseDate">
          <el-date-picker clearable
            v-model="form.courseDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择授课时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开课集体照" prop="groupPhoto">
          <imageUpload v-model="form.groupPhoto"  :isShowTip="false" class="imgView-box"/>
        </el-form-item>
        <el-form-item label="开课课程照" prop="coursePhoto">
          <imageUpload v-model="form.coursePhoto"  :isShowTip="false" class="imgView-box" />
        </el-form-item>
        <el-form-item label="开课课程照" prop="studentPhoto">
          <imageUpload v-model="form.studentPhoto"  :isShowTip="false" class="imgView-box" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="CourseCertificate" lang="ts">
import { listDept } from "@/api/system/dept"; //学校
import { DeptVO } from "@/api/system/dept/types"; //学校
import { listCourseCertificate, getCourseCertificate, delCourseCertificate, addCourseCertificate, updateCourseCertificate } from '@/api/core/courseCertificate';
import { CourseCertificateVO, CourseCertificateQuery, CourseCertificateForm } from '@/api/core/courseCertificate/types';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_yes_no,sys_period } = toRefs<any>(proxy?.useDict('sys_yes_no','sys_period'));

const courseCertificateList = ref<CourseCertificateVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const formId = ref("");
const queryFormRef = ref<ElFormInstance>();
const courseCertificateFormRef = ref<ElFormInstance>();
// 学校
interface DeptOptionsType {
  deptId: number | string;
  deptName: string;
  children: DeptOptionsType[];
}
const deptOptions = ref<DeptOptionsType[]>([]); //学校

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: CourseCertificateForm = {
  courseId: undefined,
  coursePeriod: undefined,
  courseGrade: undefined,
  courseSubject: undefined,
  courseRoot: undefined,
  courseTeacher: undefined,
  courseDept: undefined,
  courseDate: undefined,
  groupPhoto: undefined,
  coursePhoto: undefined,
  studentPhoto: undefined,
  status: undefined,
}
const data = reactive<PageData<CourseCertificateForm, CourseCertificateQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    courseId: undefined,
    coursePeriod: undefined,
    courseGrade: undefined,
    courseSubject: undefined,
    courseRoot: undefined,
    courseTeacher: undefined,
    courseDept: undefined,
    courseDate: undefined,
    groupPhoto: undefined,
    coursePhoto: undefined,
    studentPhoto: undefined,
    status: undefined,
    params: {
    }
  },
  rules: {
    courseId: [
      { required: true, message: "课程不能为空", trigger: "blur" }
    ],
    coursePeriod: [
      { required: true, message: "学段不能为空", trigger: "blur" }
    ],
    courseGrade: [
      { required: true, message: "年级(班级)不能为空", trigger: "blur" }
    ],
    courseSubject: [
      { required: true, message: "学科不能为空", trigger: "blur" }
    ],
    courseRoot: [
      { required: true, message: "授课教室不能为空", trigger: "blur" }
    ],
    courseTeacher: [
      { required: true, message: "授课教师不能为空", trigger: "blur" }
    ],
    courseDept: [
      { required: true, message: "授课学校不能为空", trigger: "change" }
    ],
    courseDate: [
      { required: true, message: "授课时间不能为空", trigger: "blur" }
    ],
    groupPhoto: [
      { required: true, message: "开课集体照不能为空", trigger: "blur" }
    ],
    coursePhoto: [
      { required: true, message: "开课课程照不能为空", trigger: "blur" }
    ],
    studentPhoto: [
      { required: true, message: "开课课程照不能为空", trigger: "blur" }
    ],
    status: [
      { required: true, message: "凭证状态不能为空", trigger: "change" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询学校列表 */
const getSchoolList = async () => {
  const res = await listDept();
  const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId");
  if (data) {
    deptOptions.value = data;
  }
};

/** 取消按钮 */
const cancel = () => {
  reset();
  proxy?.$router.go(-1);
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  courseCertificateFormRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  courseCertificateFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      
        await updateCourseCertificate(form.value).finally(() =>  buttonLoading.value = false);
    
      proxy?.$modal.msgSuccess("修改成功");
      proxy?.$router.go(-1);
    }
  });
}

/** 获取数据 */
(async () => {
  formId.value = route.query && (route.query.id as string);

  if (formId.value) {
    const res = await getCourseCertificate(formId.value);
    Object.assign(form.value, res.data);
  }
  getSchoolList()
})();
</script>

<style lang="scss" scoped>
.viewBox {
  margin: 15px 15px 80px 15px;
  .title-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    margin: 30px 0 20px;
    span {
      display: inline-block;
      margin: 0 5px;
    }
    .line-box {
      width: 4px;
      height: 24px;
      background: #05afea;
    }
  }
  .topTit {
    margin-top: 10px;
  }
  .el-form-item--default {
    margin: 15px 30px;
  }
  :deep(.el-textarea__inner) {
    width: 300px !important;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .dialog-footer {
    margin-top: 40px;
    text-align: center;
  }
}

.imgView-box {
  :deep(.el-upload-list--picture-card
      .el-upload-list__item-actions
      .el-upload-list__item-delete) {
    display: none !important;
  }
  :deep(.el-upload--picture-card) {
    display: none !important;
  }

  :deep(.el-upload-list__item.is-success .el-upload-list__item-status-label),
  :deep(.el-icon--close-tip),
  :deep(.el-icon--close) {
    display: none !important;
  }
}
</style>
